Day 15：Chrome Extension 實作篇 - 輔大系統基礎元素識別

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

👨‍💻 作者：輔大智慧資安 412580084

📅 Day 15：Chrome Extension 實作篇 - 輔大系統基礎元素識別

🎓 認識輔大學生系統

昨天我們學會了基本的 DOM 操作，今天我們要開始認識輔大學生選課清單系統的特定結構，學習如何找到學生基本資訊！

📋 學習目標

今天我們要完成：

1. 🔍 認識輔大選課清單系統的學生資訊元素
2. 📊 學會抓取基本的學生資料
3. 🌐 檢查頁面類型和狀態
4. 🧪 建立簡單的抓取函數

🔍 輔大系統學生資訊元素

1.1 學生資訊區域

根據我們的測試(按F12後尋找對應之元素)，輔大學生系統有固定的元素 ID，我們可以利用這些來抓取學生資訊。

🎓 程式碼片段 1：學生基本資訊抓取

// 抓取輔大系統中的學生基本資訊
function getStudentInfo() {
  console.log('� 開始抓取學生資訊');

  const studentInfo = {
    department: document.querySelector('#LabDptno1')?.textContent?.trim() || '未找到系級',
    studentId: document.querySelector('#LabStuno1')?.textContent?.trim() || '未找到學號',
    name: document.querySelector('#LabStucna1')?.textContent?.trim() || '未找到姓名',
    totalCredits: document.querySelector('#LabTotNum1')?.textContent?.trim() || '未找到學分'
  };

  console.log('學生資訊:', studentInfo);
  return studentInfo;
}

// 使用範例
const student = getStudentInfo();

說明：

1.2 頁面類型檢查

🌐 程式碼片段 2：檢查當前頁面

確認我們在正確的頁面上才執行抓取

// 檢查當前是否在輔大系統的正確頁面
function checkPageType() {
  const url = window.location.href;
  const title = document.title;

  console.log('🌐 檢查頁面類型');
  console.log('當前網址:', url);
  console.log('頁面標題:', title);

  const pageInfo = {
    url: url,
    title: title,
    isStudentSystem: false,
    isSchedulePage: false
  };

  // 檢查是否在學生系統
  if (url.includes('estu.fju.edu.tw')) {
    pageInfo.isStudentSystem = true;
    console.log('✅ 在輔大學生系統');
  } else {
    console.log('❌ 不在輔大學生系統');
  }

  // 檢查是否在課表相關頁面
  if (title.includes('課程') || title.includes('選課') || url.includes('CheckSelList')) {
    pageInfo.isSchedulePage = true;
    console.log('✅ 在課表相關頁面');
  }

  return pageInfo;
}

// 使用範例
const pageCheck = checkPageType();

🧪 測試階段

2.1 整合所有功能

// content.js - Day 15 基礎版本
console.log('🎓 輔大系統基礎識別器已載入 - Day 15');

// 抓取學生基本資訊
function getStudentInfo() {
  console.log('📊 開始抓取學生資訊');

  const studentInfo = {
    department: document.querySelector('#LabDptno1')?.textContent?.trim() || '未找到系級',
    studentId: document.querySelector('#LabStuno1')?.textContent?.trim() || '未找到學號',
    name: document.querySelector('#LabStucna1')?.textContent?.trim() || '未找到姓名',
    totalCredits: document.querySelector('#LabTotNum1')?.textContent?.trim() || '未找到學分'
  };

  console.log('學生資訊:', studentInfo);
  return studentInfo;
}

// 檢查頁面類型
function checkPageType() {
  const url = window.location.href;
  const title = document.title;

  console.log('🌐 檢查頁面類型');
  console.log('當前網址:', url);
  console.log('頁面標題:', title);

  const pageInfo = {
    url: url,
    title: title,
    isStudentSystem: url.includes('estu.fju.edu.tw'),
    isSchedulePage: title.includes('課程') || title.includes('選課') || url.includes('CheckSelList')
  };

  if (pageInfo.isStudentSystem) {
    console.log('✅ 在輔大學生系統');
  } else {
    console.log('❌ 不在輔大學生系統');
  }

  return pageInfo;
}

// 主要執行函數
function basicFjuExtraction() {
  try {
    console.log('🔍 開始基礎資料抓取');

    // 1. 檢查頁面
    const pageCheck = checkPageType();

    if (!pageCheck.isStudentSystem) {
      console.log('❌ 不在輔大學生系統頁面');
      return null;
    }

    // 2. 抓取學生資訊
    const studentInfo = getStudentInfo();

    // 3. 組合結果
    const result = {
      pageInfo: pageCheck,
      studentInfo: studentInfo,
      extractTime: new Date().toISOString()
    };

    console.log('✅ 基礎資料抓取完成');
    console.log('📊 結果摘要:');
    console.log(`- 學生姓名: ${studentInfo.name}`);
    console.log(`- 學生系級: ${studentInfo.department}`);
    console.log(`- 學生學號: ${studentInfo.studentId}`);

    return result;

  } catch (error) {
    console.error('❌ 抓取失敗:', error);
    return null;
  }
}

// 監聽來自 background 的訊息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('📨 收到訊息:', request);

  if (request.action === 'basicExtraction') {
    const result = basicFjuExtraction();
    sendResponse(result);
  }

  return true;
});

// 頁面載入完成後自動執行一次
setTimeout(() => {
  basicFjuExtraction();
}, 1500);

console.log('🚀 輔大系統基礎識別器初始化完成 - Day 15');

2.2 測試步驟

步驟 1：更新檔案

將上面的程式碼保存為新的 content.js

🔄 步驟 2：重新載入擴充功能

在 Chrome 擴充功能管理頁面重新載入

🧪 步驟 3：測試功能

1. 登入輔大學生選課清單系統：網域為http://estu.fju.edu.tw
2. 查看 Console：確認有顯示成功抓取學生基本資訊（姓名、系級、學號）即成功
   

🔗 知識銜接：今天我們學會了基礎的輔大系統元素識別，明天將學習如何在輔大網頁中注入「我的課表」按鈕，讓用戶可以直接在學生系統中使用我們的功能。

🎯 下集預告：Day 16 - 在輔大網頁中注入「我的課表」按鈕 🌐